Page MenuからScrapCalcを動かす
https://i.gyazo.com/644f0be1ccfee5ff59fceb248e68efcc.gif
(ブックマークレット不要になりました)
激しく苦しい方法で a = 10 みたいなグローバル変数にアクセスできるようにしている
UserScriptはstrictなので a=10みたいなのをevalしても変数未定義エラーになってしまうらしいので
変数名に日本語使うとわかりやすい
計算結果をDOMに反映する処理までまとめてFunction()に放り込んでいるんですねtakker.icon
勉強になります
実装が苦しいのはともかく、こういうのは便利だと思います 増井俊之.icon
因みに配列に対応とか難しいですか？air34n.icon
配列欲しいですが、 ] が修飾記法の区切りだと思われてしまいますね... 増井俊之.icon
数式記法[$ [hoge] ]の場合、一番最後の]がスペースついて ]だとそっちを記法の綴じカッコとして解釈されますmiyamonz.icon
$ [hoge] こんなん
なので他の記法でもこういうふうにしてもらうよう要望するのも良いかも？
他の影響がありそうで難しいかな
あーなるほど 増井俊之.icon
[= a［10］] みたいに全角文字で[を書くととりあえず動くようにしました
ありがとうございますぅair34n.icon
サンプル
a = 10 b = 20
a × b = a * b
東京オリンピックまで Math.floor((new Date(2021,7,23) - Date.now()) / (24 * 60 * 60 * 1000)) 日
あれ、計算違ってる? 増井俊之.icon
東京オリンピックまで Math.floor((new Date(2021,6,23) - Date.now()) / (24 * 60 * 60 * 1000)) 日 が正しいようだ
（もうすぐ$ \infになりそうな…）yosider.icon
応用例
電卓みたいにちょっとした計算に使う
$ \sqrt{2} = Math.sqrt(2)
今日の日付 = Date()
PI = Math.atan(1) * 4
この用途の場合だと、DOMではなくscrapbox上の文字自体を書き換えた方が便利そう
Issues
リロードしてからでないと再計算できない
innerHTMLを書き換えるのをやめればいいのか?
対策
書き換えたDOMを何らかの形で保持しておく
DOMにdata属性を持たせるのが簡単かも
DOM書き換えるのをやめればいい?
リロードでなくてもいいのか
ページ移動したら再計算できる
使い方
以下のUserCSSとUserScriptを自分のページに貼ると使えます
[% 数式 = 0] ⇒ 数式 = 0
code:style.css
.deco-\= {
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:script.js
function strict(){
const commands = [];
let count = 0;
for(let expr of document.querySelectorAll('.deco-\\=')){
const text = expr.innerText;
if(text.match(/=/)){
// 全角 ［ を半角 [ にする
}
else {
let processed = false;
for(let e of expr.children){
let id = scrapcalc_element_id_${count};
e.id = id;
if(processed){
commands.push(document.getElementById("${id}").innerHTML = "";);
}
else {
processed = true;
commands.push(document.getElementById("${id}").innerHTML = "<span style='font-style:italic;font-weight:bold;'>"+(${decodeURI(text.replace(/［/g,'[').replace(/］/g,']'))})+"</span>";);
}
count += 1;
}
}
}
return commands.join("\n");
}
scrapbox.PageMenu.addMenu({
title: 'ScrapCalc',
onClick: () => {
const sneaky = Function((() => {${strict()}})(););
sneaky();
},
});
以下のようにするとショートカットキー(Ctrl-C)で呼び出せる
code:script.js
document.addEventListener('keypress', e => {
if (e.key == 'c' && e.ctrlKey){
const sneaky = Function((() => {${strict()}})(););
sneaky();
}
})
これ動かないけどなんでじゃろ。。。
動くようになった、、謎。。。まあヨシ！